<!--
 * @Description:大屏首页
 * @Author: gaoyunpeng
 * @Date: 2022-01-22 10:20:30
 * @LastEditors: gaoyunpeng
-->
<template>
  <div class="home-div">
    <div class="tabs">
      <button @click="btn(1)" :class="num === 1 ? 'active' : 'button'">
        模板1
      </button>
      <button @click="btn(2)" :class="num === 2 ? 'active' : 'button'">
        模板2
      </button>
      <button @click="btn(3)" :class="num === 3 ? 'active' : 'button'">
        模板3
      </button>
      <button @click="btn(4)" :class="num === 4 ? 'active' : 'button'">
        模板4
      </button>
    </div>
    <Template1 v-if="num === 1"></Template1>
    <Template2 v-if="num === 2"></Template2>
    <Template3 v-if="num === 3"></Template3>
    <Template4 v-if="num === 4"></Template4>
  </div>
</template>

<script>
import { Template1, Template2, Template3, Template4 } from './components/index'
export default {
  components: {
    Template1,
    Template2,
    Template3,
    Template4
  },
  data() {
    return {
      num: 1
    }
  },
  methods: {
    btn(i) {
      this.num = i
    }
  }
}
</script>

<style lang="scss" scoped>
.home-div {
  position: relative;
  width: 100%;
  height: 100%;
  // 可删除 选择模板的样式
  .tabs {
    position: absolute;
    top: 0px;
    left: 20px;
    z-index: 9999;
    button {
      width: 55px;
      height: 25px;
      font-size: 13px;
      // background: linear-gradient(180deg, #adff88, #11e1b2);
      background: linear-gradient(180deg, #0dade1, #37dbff);
      color: #fff;
      border: 0;
      margin-right: 2px;
    }
    .active {
      background: linear-gradient(180deg, #adff88, #11e1b2);
      border: 1px solid #11e1b2;
    }
  }
}
</style>
